// 滑动导航实现 获取导航的实例
const headerEl = document.querySelector("header")
// 返回顶部按钮出现的时机 获取导航实例
const scrollToTop = document.querySelector(".scrollToTop");
// 监听滑动 当窗口滑动 触发回调
window.addEventListener("scroll", () => {
    // 获取元素位置
    // getBoundingClientRect().height 元素自身的高度
    let height = headerEl.getBoundingClientRect().height
    // window.pageYOffset 垂直方向上的滚动距离
    if (window.pageYOffset - height > 800) {//向下滑动了多少距离
        //判断该DOM元素headerEl 是否有被sticky 修饰
        if (!headerEl.classList.contains("sticky")) {
            // 如果没有被这个class 修饰就加上
            headerEl.classList.add("sticky");
        }
    } else {
        headerEl.classList.remove("sticky")
    }
    // 垂直滚动距离超过2000 出现返回顶部的按钮
    if (window.pageYOffset > 2000) {
        scrollToTop.style.display = "block";
    } else {
        scrollToTop.style.display = "none";

    }
})
//选取class为glide的div 作为轮播组件
const glide = new Glide(".glide")
// //要产生动画效果的DOM节点进行获取(所有的标题)
const captionEl = document.querySelectorAll(".slide-caption")
// 当图片加载 和轮播时 显示标题
glide.on(["mount.after", "run.after"], () => {
    // 获取当前显示的轮播的下标  
    const caption = captionEl[glide.index]
    anime({
        //对谁执行动画
        targets: caption.children,
        // 透明度 从0-1
        opacity: [0, 1],
        // 动画执行时间0.4s
        duration: 400,
        // 动画执行函数 //线性的
        easing: "linear",
        // delay:延迟效果
        // anime.stagger会对caption的每一个child 进行轮流出现出现的效果 
        // 400表示 h1出现后 再过400毫秒出现h3
        // 300表示 h1出现之前先等300毫秒
        delay: anime.stagger(400, { start: 300 }),
        //translateY 让他从下方移动到上方
        // anime.stagger([40, 10]) 第一个元素(h1)向下移动的最大是40 h1 从下方40的位置 到0(原位)
        // 第二个元素(h3)向下移动40-10中间的数字,
        // 从第一个元素到最后一个元素 每一个向下移动的越来越少
        // 0表示他原本的位置
        translateY: [anime.stagger([40, 10]), 0]
    })
})
//  
// 每次轮播之前不显示 轮播后显示 
// 所以在轮播前 要将轮播还原回去
glide.on("run.before", () => {
    //选出所有子元素
    document.querySelectorAll(".slide-caption > *").forEach(el => {
        el.style.opacity = 0;
    })
})
glide.mount()

// 拿到一个容器
const isotope = new Isotope(".cases", {
    layoutMode: "fitRows",
    // 每一个案例的元素
    itemSelector: ".case-item",
})

const filterBtns = document.querySelector(".filter-btns")
// 给容器设置监听事件
// 给父容器一个监听事件 而不是给每一个子元素 监听事件
// 点击子元素 最后会冒泡到父元素, 不如直接在父元素上进行事件的统一处理
filterBtns.addEventListener("click", e => {
    // e相当于 window.event  e表示事件对象
    // target是事件对象里的属性 表示你点击的那个目标 (DOM标签)
    // 通过 getAttribute("data-filter")方法拿到自定义属性的值
    let { target } = e;
    const filterOption = target.getAttribute("data-filter");
    //存在该属性
    if (filterOption) {
        //querySelectorAll 获取指定CSS类名的所有指定元素
        // 取消所有的样式 
        document.querySelectorAll('.filter-btn.active').forEach(btn => btn.classList.remove("active"))
        // 给点击的这个DOM节点 加上样式
        target.classList.add("active")
        // 点击不同的button 根据data-filter的值来筛选对应的内容
        isotope.arrange({ filter: filterOption })
    }
})

const staggeringOption = {
    // 延迟300毫秒出现
    delay: 300,
    // 从下到上 有50像素的移动
    distance: "50px",
    duration: 500,//500毫秒
    easing: "ease-in-out",
    // 设定方向 从下到上  top的话 是上到下
    origin: "bottom",
}




// 下拉后 item 逐一出现的效果实现 
// 扩展运算符 就是把staggeringOption的所有属性拿出来, 并拼上一个新的属性, 如果属性重复 就会被后面的interval代替
ScrollReveal().reveal(".feature", { ...staggeringOption, interval: 350 }); //给features 设置淡入的效果
ScrollReveal().reveal(".service-item", { ...staggeringOption, interval: 350 })
const dataSectionEl = document.querySelector(".data-section")

// 数字逐渐累加的动画
ScrollReveal().reveal(".data-section", { //给这个大模块里的某一个子元素添加动画
    // 当他出现之前 有一个回调函数
    beforeReveal: () => {
        // 结合anime库 进行数字动画
        anime({
            targets: ".data-piece .num", // 对.data-piece下的.num 进行一个动画效果
            innerHTML: el => {
                return [0, el.innerHTML] //从0 到目标的内部定义好的那个数字
            },
            // 两秒执行完
            duration: 2000,
            // 数字按1增长
            round: 1,
            // 越来越快
            easing: "easeInExpo"
        })
        // 出现之前 更新一下背景的位置   解决卡顿 问题
        if (bottom >= 0 && top <= window.innerHeight) {
            dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom / 5}px)` //x轴center /5 除的数字越大 他移动的越慢
        }
    }
})

// 设置背景时差流动的效果-->原理是通过 可视化区域 不停滚动 来显示修改 背景图片的位置
window.addEventListener("scroll", () => {
    //getBoundingClientRect().bottom 元素下边到视窗上边的距离;
    const bottom = dataSectionEl.getBoundingClientRect().bottom;
    const top = dataSectionEl.getBoundingClientRect().top;

    // 判断是否在可见范围
    // bottom =0 是网页不断滚动下拉 正好看不到该DOM的位置 => 你再上拉一点 就能看到了=>上拉后bottom 就大于0了  
    // bottom = 0 元素的下边和视窗的上面重合 
    // top = windowe 元素的上边到视窗的距离 等于为浏览器窗口的视口的高度。
    //  top要小于等于浏览器的最底部, = 的情况 就是 不断下拉  再下拉一点 就能看到了
    if (bottom >= 0 && top <= window.innerHeight) {
        dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom / 5}px)` //x轴center /5 除的数字越大 他移动的越慢
    }

})

// 滚动效果实现 初始化实例
//nav 下面 a标签 对于Href属性 以#开头的选出来button,还有返回顶部的 也选出来
const scroll = new SmoothScroll('nav a[href*="#"], .scrollToTop a[href*="#"]', {
    // header 是否有一个固定的导航   
    header: "header",
    // 滚动到这个区域时 继续往下多余滚动80像素
    offset: 80
})

// 开始滚动时
document.addEventListener("scrollStart", () => {
    // 如果全屏的导航是打开的 就把他去掉
    if (headerEl.classList.contains("open")) {
        headerEl.classList.remove("open")
    }
})

// 点击glider 探索更多 可以跳转  关于我们这个区域
const exporeBtnEls = document.querySelectorAll(".explore-btn");
exporeBtnEls.forEach(exporeBtnEl => {
    exporeBtnEl.addEventListener("click", () => {
        // 指定跳转到的位置
        scroll.animateScroll(document.querySelector("#about-us"))
    })
})

// 获取折叠按钮的实例
const burgerEl = document.querySelector(".burger")
burgerEl.addEventListener("click", () => {
    // 二级菜单的显示与隐藏 toggle , 通过动态添加open 样式 来显示与隐藏 二级菜单
    headerEl.classList.toggle("open")
})